<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hanzi Writer</title>
  <!-- 使用CDN加载，确保可用 -->
  <script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.5/dist/hanzi-writer.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f9f9f9;
    }
    #character-target-div {
      width: 200px;
      height: 200px;
      background-color: #fff;
      border-radius: 5px;
      border: 1px solid #ddd;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    #status {
      margin-top: 10px;
      font-size: 14px;
      color: #666;
    }
    #controls {
      margin-top: 15px;
      display: flex;
      gap: 15px;
    }
    button {
      padding: 8px 15px;
      background-color: #007aff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }
    button:active {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div id="character-target-div"></div>
  <div id="status">加载中...</div>
  <div id="controls">
    <button onclick="animateCharacter()">播放笔顺</button>
    <button onclick="startQuiz()">描红练习</button>
  </div>
  
  <script>
    // 显示状态信息
    function showStatus(message) {
      document.getElementById('status').textContent = message;
      console.log(message);
    }
    
    // 获取URL参数
    function getQueryParam(name) {
      const urlParams = new URLSearchParams(window.location.search);
      return urlParams.get(name);
    }
    
    // 向父窗口发送消息
    function sendMessage(action, data) {
      try {
        // 尝试使用小程序的方式发送消息
        if (window.wx && window.wx.miniProgram) {
          window.wx.miniProgram.postMessage({
            data: {
              action: action,
              data: data
            }
          });
          showStatus(`已发送小程序消息: ${action}`);
        } 
        // 尝试使用标准Web方式发送消息
        else if (window.parent) {
          window.parent.postMessage({
            action: action,
            data: data
          }, '*');
          showStatus(`已发送Web消息: ${action}`);
        }
      } catch (error) {
        showStatus(`发送消息失败: ${error.message}`);
      }
    }
    
    // 播放笔顺动画
    function animateCharacter() {
      if (window.writer) {
        showStatus('正在播放笔顺动画...');
        window.writer.animateCharacter({
          onComplete: function() {
            showStatus('笔顺动画播放完成');
          }
        });
        return true;
      } else {
        showStatus('错误: 汉字未加载完成，请稍后再试');
        return false;
      }
    }
    
    // 开始描红练习
    function startQuiz() {
      if (window.writer) {
        showStatus('开始描红练习，请跟随笔画书写');
        window.writer.quiz({
          onComplete: function() {
            showStatus('描红练习完成！');
          }
        });
        return true;
      } else {
        showStatus('错误: 汉字未加载完成，请稍后再试');
        return false;
      }
    }
    
    // 初始化 HanziWriter
    function initWriter(character) {
      try {
        showStatus(`正在加载汉字: ${character}`);
        
        // 检查 HanziWriter 是否可用
        if (typeof HanziWriter === 'undefined') {
          showStatus('正在加载HanziWriter库...');
          
          // 尝试动态加载 HanziWriter
          const script = document.createElement('script');
          script.src = 'https://cdn.jsdelivr.net/npm/hanzi-writer@3.5/dist/hanzi-writer.min.js';
          script.onload = function() {
            showStatus('HanziWriter库加载成功');
            initWriter(character);
          };
          script.onerror = function() {
            showStatus('HanziWriter库加载失败，请检查网络连接');
          };
          document.head.appendChild(script);
          return;
        }
        
        // 清空容器
        const container = document.getElementById('character-target-div');
        container.innerHTML = '';
        
        // 创建 HanziWriter 实例
        window.writer = HanziWriter.create('character-target-div', character, {
          width: 200,
          height: 200,
          padding: 5,
          showOutline: true,
          strokeColor: '#333',
          outlineColor: '#ddd',
          highlightColor: '#007aff',
          delayBetweenStrokes: 500,
          drawingWidth: 4,
          onLoadCharDataSuccess: function() {
            showStatus(`汉字"${character}"加载成功，点击按钮开始`);
            sendMessage('ready', { character: character });
          },
          onLoadCharDataError: function(error) {
            showStatus(`汉字数据加载失败: ${error}`);
          }
        });
        
        // 检查是否需要执行动作
        const action = getQueryParam('action');
        if (action === 'animate') {
          setTimeout(animateCharacter, 800);
        } else if (action === 'quiz') {
          setTimeout(startQuiz, 800);
        }
      } catch (error) {
        showStatus(`初始化失败: ${error.message}`);
      }
    }
    
    // 获取要显示的汉字
    const character = getQueryParam('char') || '一';
    
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      showStatus('页面已加载，正在初始化...');
      
      // 初始化 HanziWriter
      initWriter(character);
      
      // 通知父窗口已准备好
      setTimeout(function() {
        sendMessage('ready', { character: character });
      }, 1500);
    });
  </script>
</body>
</html> 